<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>评论测试</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-row {
            margin-bottom: 20px;

        &
        :last-child {
            margin-bottom: 0;
        }

        }
        .el-col {
            border-radius: 4px;
        }

        .bg-purple-dark {
            background: #99a9bf;
        }

        .bg-purple {
            background: #d3dce6;
        }

        .bg-purple-light {
            background: #e5e9f2;
        }

        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }

        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
        .transition-box {
            margin-bottom: 10px;
            width: 200px;
            height: 100px;
            border-radius: 4px;
            background-color: #409EFF;
            text-align: center;
            color: #fff;
            padding: 40px 20px;
            box-sizing: border-box;
            margin-right: 20px;
        }
    </style>

</head>
<body>
<div id="app">

    <el-row :gutter="20">

            <div class="block">
                <span class="demonstration">当前车位实景图</span>
                <el-image :src="src"></el-image>
            </div>
    </el-row>

    <el-row :gutter="20">
        <!--<el-col :span="1">请打分:</el-col>-->
        <el-col :span="2">
        <el-button  icon="el-icon-edit" circle @click="docomment" >发表评论</el-button>
        </el-col>
        <el-col :span="12">

            <el-rate style="margin-top: 10px"
                    v-model="value"
                     @change="comm(value)"
                    show-text>
            </el-rate>

        </el-col>
<!--        <el-button  icon="el-icon-edit" circle>发表评论</el-button>-->
    </el-row>
    <el-row :gutter="20">
        <el-col :span="16">
            <el-collapse v-model="activeNames">
                <el-collapse-item  v-for="c in newComm"  v-bind:title="c.commentTitle">
                    <el-link @click="reply(c)">回复<i class="el-icon-chat-dot-square"></i></el-link>
                    <el-row :gutter="20">
                        <div v-if="c.text!=null" v-for="t in c.text">

                            <el-col :span="22">
                                {{t}}
                            </el-col>
                            <!--<el-col :span="2">
                                <el-link @click="doReply(c)">回复<i class="el-icon-chat-dot-square"></i></el-link>
                            </el-col>-->
                        </div>
                    </el-row>


                </el-collapse-item>
            </el-collapse>
        </el-col>

    </el-row>




    <!-- 模态框Form -->
<!--    <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>-->

    <el-dialog title="回复评论" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="回复内容" :label-width="formLabelWidth">
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="请输入内容"

                        v-model="textarea2">
                </el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="checkAuditsubmit" :loading="loadingbut">{{loadingbuttext}}</el-button>
<!--            <el-button type="primary" id="btn" :disabled="isDisabled" @click="doReply">确 定</el-button>-->
        </div>
    </el-dialog>

    <el-dialog title="发表评论" :visible.sync="dialogFormComment">
        <el-form :model="form">
            <el-form-item label="评论内容" :label-width="formLabelWidth">
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="请输入内容"
                        v-model="textareaComment">
                </el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormComment = false">取 消</el-button>
            <el-button type="primary" @click="goComment" :loading="loadingbut">{{loadingbuttext}}</el-button>
            <!--            <el-button type="primary" id="btn" :disabled="isDisabled" @click="doReply">确 定</el-button>-->
        </div>
    </el-dialog>
</div>

<script src="js/jquery-3.5.1.js"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/axios.js"></script>


<script>
    let picURL = sessionStorage.getItem("PICURL");
    let parkId = sessionStorage.getItem("PARKID");
    var app = new Vue({
        el: "#app",
        data: {
            src:picURL,
            activeNames: ['1'],
            value: null,
            comment: [],
            flag: false,
            commontForm:{},
            show3: false,
            textarea1: '',
            loadingbut:false,//审核提交加载中
            loadingbuttext:'确定',
            isDisabled:false,
            dialogFormVisible: false,
            dialogFormComment:false,
            newComm:[],
            replyComm:{},
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: '',
                commentTag:'',
                commentUserId:'',
                commentReplyUserId:'',
                commentContext:'',
                commentLevel:'',
                commentParkspaceId:''
            },
            formLabelWidth: '120px',
            textarea2: '',
            textareaComment:''
            // title:[]

        },
        methods: {
            comm:function(val){
                console.log(val);
                this.form.commentLevel=val;
            },

            reply:function (comment) {
                console.log("回复按钮");
                this.replyComm=comment;
                this.dialogFormVisible = true;

            },
            docomment:function(){
                this.dialogFormComment = true;
            },
            goComment:function(){
                var vm=this;
                this.loadingbut = true;
                this.loadingbuttext = '审核中...';
                // ......
                //     访问接口获取成功以后再改变状态
                vm.isDisabled=true;
                console.log("点击事件");
                vm.form.commentReplyUserId=0;
                vm.form.commentContext=vm.textareaComment;
                vm.form.commentParkspaceId=parkId;
                var commentForm=vm.form;
                // console.log(comment);
                axios.post("comment",commentForm)
                    .then(resp=>{
                        console.log("回调函数");
                        if (resp.data.success){
                            vm.comment=resp.data.object;
                            console.log(resp.data.object);
                            vm.newComm.splice(0, vm.newComm.length);
                            getInfo(vm.comment,vm.newComm);

                            // window.location="commentTest.html";
                        }else{
                            alert(resp.data.message);
                        }
                        this.loadingbut = false;
                        this.loadingbuttext = '确定';
                        vm.isDisabled=false;
                        vm.dialogFormComment = false;
                    })
            },
            checkAuditsubmit:function(){
                var vm=this;
                this.loadingbut = true;
                this.loadingbuttext = '审核中...';
                // ......
                //     访问接口获取成功以后再改变状态
                vm.isDisabled=true;
                console.log("点击事件");
                vm.form.commentTag=vm.replyComm.commentTag;
                vm.form.commentReplyUserId=vm.replyComm.commentUserId;
                vm.form.commentContext=vm.textarea2;
                vm.form.commentParkspaceId=parkId;
                var commentForm=vm.form;
                // console.log(comment);
                axios.post("comment",commentForm)
                    .then(resp=>{
                        console.log("回调函数");
                        if (resp.data.success){
                            vm.comment=resp.data.object;
                            console.log(resp.data.object);
                            vm.newComm.splice(0, vm.newComm.length);
                            getInfo(vm.comment,vm.newComm);

                            // window.location="commentTest.html";
                        }else{
                            alert(resp.data.message);
                        }
                        this.loadingbut = false;
                        this.loadingbuttext = '确定';
                        vm.isDisabled=false;
                        vm.dialogFormVisible = false;
                    })
            },
            /*doReply:function () {

            },*/

        },
        created: function () {
            var vm = this;
            axios.get("getComment", {params: {parkspaceId: parkId}})
                .then(resp => {

                    // console.log(resp);
                    this.comment = resp.data.object;
                    console.log(this.comment);
                    // getInfo(this.comment);
                    for (let i = 0; i < vm.comment.length; i++) {
                        vm.comment[i]["text"]=[];
                        /*Array.prototype.slice.call(vm.comment[i].text);
                        console.log(typeof (vm.comment[i].text));*/
                        // vm.comment[i].commentTitle = vm.comment[i].commentUserName + '：' + vm.comment[i].commentContext;
                        for (let j = 1; j < vm.comment.length; j++) {
                            if (vm.comment[i].commentTag == vm.comment[j].commentTag &&vm.comment[i].commentReplyUserId == 0) {
                                vm.comment[i].commentTitle = vm.comment[i].commentUserName + '：' + vm.comment[i].commentContext;
                                if (vm.comment[j].commentReplyUserName != null) {
                                    vm.comment[i].text.push(vm.comment[j].commentUserName + ' 回复 ' + vm.comment[j].commentReplyUserName + '：' + vm.comment[j].commentContext);
                                    // vm.comment.splice(j, 1);
                                }

                            }
                        }
                        // console.log(vm.comment[i].text);
                        if (vm.comment[i].commentReplyUserId == 0){
                            vm.newComm.push(vm.comment[i]);
                        }

                    }
                    console.log(vm.newComm);
                })
        }
    });
    function getInfo(comment,newComm) {
        for (let i = 0; i < comment.length; i++) {
            comment[i]["text"]=[];
            /*Array.prototype.slice.call(vm.comment[i].text);
            console.log(typeof (vm.comment[i].text));*/
            // vm.comment[i].commentTitle = vm.comment[i].commentUserName + '：' + vm.comment[i].commentContext;
            for (let j = 1; j < comment.length; j++) {
                if (comment[i].commentTag == comment[j].commentTag &&comment[i].commentReplyUserId == 0) {
                    comment[i].commentTitle = comment[i].commentUserName + '：' + comment[i].commentContext;
                    if (comment[j].commentReplyUserName != null) {
                        comment[i].text.push(comment[j].commentUserName + ' 回复 ' + comment[j].commentReplyUserName + '：' + comment[j].commentContext);
                        // vm.comment.splice(j, 1);
                    }

                }
            }
            // console.log(vm.comment[i].text);
            if (comment[i].commentReplyUserId == 0){
                newComm.push(comment[i]);
            }

        }
        console.log(newComm);
    }

</script>
</body>
</html>